<template>
  <div id="GenderSpread">
    <div class="GenderSpread-box">
      <div class="box-left-img">
        <img
          v-if="pieDataValue[0] != 100.0"
          src="@/assets/liu/boy.png"
          alt=""
        />
      </div>
      <div class="box-wrap">
        <!-- 进度条 -->
        <div class="box-wrap-top">
          <!-- 左边进度条 -->
          <div class="top-left" :style="{ width:rightWidth  }"></div>
          <!-- 右边进度条 -->
          <div class="top-right" :style="{ width:leftWidth  }"></div>
        </div>
        <!-- 百分比 -->
        <div class="box-wrap-bottom">
          <div v-if="pieDataValue[0] != 100.0" class="bottom-left">
            男性 {{ pieDataValue[1] }}%
          </div>
          <div v-if="pieDataValue[1] != 100.0" class="bottom-right">
            女性 {{ pieDataValue[0] }}%
          </div>
        </div>
      </div>
      <div class="box-right-img">
        <img
          v-if="pieDataValue[1] != 100.0"
          src="@/assets/liu/girl.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    pieData: Array | Object,
    name: String,
  },
  data() {
    return {
      colorList: [],
      leftWidth: 0,
      rightWidth: 0,
    };
  },
  computed: {
    pieDataValue() {
      let arr = this.pieData.map(function (item) {
        return item.value;
      });
      let arrValue = this.scaleValue(arr);
      this.leftWidth = arrValue[0] + "%";
      if (arrValue[1]) {
        this.rightWidth = arrValue[1] + "%";
      }
      return arrValue;
    },
    pieDataName() {
      let arr = this.pieData.map(function (item) {
        return item.name;
      });
      return arr;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.drawTalentPie();
  },

  methods: {
    drawTalentPie() {},
    // js 计算百分比的方法
    scaleValue(countArray) {
      var j = eval(countArray.join("+"));
      var resultArray = [];
      for (var i = 0; i < countArray.length; i++) {
        var k = ((countArray[i] / j) * 100).toFixed(2);
        resultArray.push(k);
      }
      return resultArray;
    },
  },
};
</script>
<style lang='less' scoped>
#GenderSpread {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  .GenderSpread-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
    .box-left-img {
      width: 24px;
      height: 48px;
      margin-right: 11px;
      img {
        width: 24px;
        height: 24px;
      }
    }
    .box-right-img {
      width: 24px;
      height: 48px;
      margin-left: 11px;
      img {
        width: 24px;
        height: 24px;
      }
    }
    .box-wrap {
      width: 60%;
      height: 44px;
      .box-wrap-top {
        width: 100%;
        height: 12px;
        display: flex;
        background-color: #f3ac62;
        border-radius: 100px;
        .top-left {
          width: 10%;
          height: 100%;
          border-radius: 100px;
          // background-color: #1779ff;
          background-color: #6aa9ff;
        }
        .top-right {
          width: 90%;
          height: 100%;
          border-radius: 0 100px 100px 0;
          // background-color: #fd7f2c;
          background-color: #f3ac62;
        }
      }
      .box-wrap-bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        .bottom-left {
          font-size: 14px;
          font-weight: 500;
          color: #6aa9ff;
        }
        .bottom-right {
          font-size: 14px;
          font-weight: 500;
          color: #f3ac62;
        }
      }
    }
  }
}
</style>